import React, { useEffect } from 'react'
import { Button, Form, Input, Card, Space, message } from 'antd'
import {
  reqAddHospitalSet,
  reqGetOneHospitalSet,
  reqEditOneHospitalSet,
} from '@api/hospitalSet'
import { useNavigate, useParams } from 'react-router-dom'

export default function HospitalSetAdd() {
  const { id } = useParams()

  const navigate = useNavigate()

  //创建form实例
  const [form] = Form.useForm()

  useEffect(() => {
    // 如果没有id,则一定是添加.有id是修改
    if (!id) return // 有id才获取数据
    ;(async function () {
      const result = await reqGetOneHospitalSet(id as string)
      // console.log(result)]
      form.setFieldsValue(result)
    })()
  }, [])
  const onFinish = async (values: any) => {
    if (id) {
      //修改
      // 注意: 修改时,需要给服务器上传id.values中只有当前表单中5条数据没有id,所以需要额外添加
      values.id = id
      await reqEditOneHospitalSet(values)
      // 提示用户
      message.success('修改医院成功')
    } else {
      // 发送请求添加医院
      await reqAddHospitalSet(values)
      // 提示用户
      message.success('添加医院成功')
    }
    // 回到医院设置
    navigate(-1)
  }

  return (
    <Card>
      <Form
        form={form}
        // antd中默认提供了栅格系统,帮我们布局页面. Form组件中也使用了antd的栅格系统
        // labelCol表示表单中提示文本那一列. wrapperCol表示表单中表单元素那一列
        // span表示这一列占用一行中的多少份. 一行总24份
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        // initialValues设置表单中元素的默认值. 通过Form.Item的name属性控制对应的表单元素
        // initialValues={{ remember: false, username: '123' }}
        // 提交按钮触发的事件处理函数,如果有表单校验,校验通过才触发
        onFinish={onFinish}
        // 如果表单校验不通过,则触发onFinishFailed
        // onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          // 给当前表单元素设置校验规则
          rules={[{ required: true, message: '请输入医院名称' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编码"
          name="hoscode"
          rules={[{ required: true, message: '请输入医院编码' }]}
        >
          {/* <Input.Password />   密码框*/}
          <Input />
        </Form.Item>

        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请输入api基础路径' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人名称"
          name="contactsName"
          rules={[{ required: true, message: '请输入联系人名称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          // pattern专门用来定义正则的
          rules={[
            { required: true, message: '请输入手机号' },
            { pattern: /^1[3-9]\d{9}$/, message: '必须是正确的手机号格式' },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2 }}>
          <Space>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
            <Button
              onClick={() => {
                navigate(-1)
              }}
            >
              返回
            </Button>
          </Space>
        </Form.Item>

        {/* <Form.Item
          name="remember"
          // 声明当前表单元素要控制值的属性是checked属性.因为antd中默认操作表单元素是操作value属性,所以如果要操作其他属性需要特别声明
          valuePropName="checked"
          // offset:8 表示当前的复选框左侧偏移24份中的8份
          wrapperCol={{ offset: 8, span: 16 }}
        >
          <Checkbox>Remember me</Checkbox>
        </Form.Item> */}
      </Form>
    </Card>
  )
}
